<template>
  <el-row id="home" :gutter="20">
    <!-- 左边区域 -->
    <el-col :span='8'>
      <!-- 左上方卡片 -->
      <el-card shadow="hover">
        <div class="user">
          <img :src="img" />
          <div class="user-info">
            <p class="name">admin</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="login-info">
          <p>上次登录时间:<span>2022-3-9</span></p>
          <p>上次登录地点:<span>重庆</span></p>
        </div>
      </el-card>
      <!-- 左下方卡片 -->
      <el-card style="margin-top: 20px;" shadow="hover">
        <el-table
          :data="tableData"
          height="350"
          style="width: 100%">
          <el-table-column
            v-for="(val, key) in tableLabel"
            :key="key"
            :prop="key"
            :label="val"
            >
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <!-- 右边部分 -->
    <el-col :span="16">
      <div class="num">
        <el-card 
          shadow="hover"
          v-for="(item, index) in countData"
          :key="index"
          :body-style="{display: 'flex', padding: 0}"
          >
          <i class="icon" :class="`el-icon-${item.icon}`" :style="{ background: item.color, width: '50px', }"></i>
          <div class="detail">
            <p class="nums">Y{{item.value}}</p>
            <p class="text">{{item.name}}</p>
          </div>
        </el-card>
      </div>
      <el-card class="line-wrapper" shadow="hover" style="height: 260px;">
        <div ref="chartLine" style="height: 300px;width: 800px"></div>
      </el-card>
      <div class="rb-wrapper">
        <el-card class="chart-wrapper" shadow="hover" style="height: 240px;width: 48%">
          <div ref="chartCategory" style="height: 240px; width: 400px"></div>
        </el-card>
        <el-card class="chart-wrapper" shadow="hover" style="height: 240px;width: 48%">
          <div ref="chartPie" style="height: 350px;width: 400px"></div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "Home",
  data() {
    return {
      img: require("@/assets/img/002.jpeg"),
      //左侧下方表格数据
      tableLabel: {
        name: "商品名称",
        todayBuy: "今日购买",
        monthBuy: "当月购买",
        totalBuy: "总购买"
      },
      tableData: [
        {
          name: 'oppo',  
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
        {
          name: 'oppo',  
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
        {
          name: 'oppo',  
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
        {
          name: 'oppo',  
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
        {
          name: 'oppo',  
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
     ],
      //右侧上分卡片数据
      countData: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9"
        },
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9"
        },
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9"
        },
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9"
        },
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9"
        },
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9"
        },
      ]
    }
  },
  mounted() {
    // 折线图
    this.chartLineInit()
    // 柱状图
    this.chartCateInit()
    // 饼图
    this.chartPieInit()
  },
  methods: {
    // 图表初始化
    chartLineInit() {
      let myChart = echarts.init(this.$refs.chartLine);
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260, 300, 400, 100, 50, 300],
            type: 'line'
          },
          {
            data: [100, 250, 500, 100, 20, 250, 400, 500, 400, 100, 30, 500],
            type: 'line'
          }
        ]
      };
      // 挂载option
      myChart.setOption(option)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },
    chartCateInit() {
      let myChart = echarts.init(this.$refs.chartCategory);
      let option = {
        title: {
          text: '上周销量情况',
          left: 'center',
          top: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '上周周内销量',
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: false,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },
    chartPieInit() {
      let myChart = echarts.init(this.$refs.chartPie);
      let option = {
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'middle'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '总销量',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'oppo' },
              { value: 735, name: '小米' },
              { value: 580, name: '苹果' },
              { value: 484, name: '三星' },
              { value: 300, name: '一加' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },
  },
}
</script>

<style lang="less" scoped>
#home {
  padding: 20px;
}
.user {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  img {
    width: 150px;
    border-radius: 50%;
  }
  .user-info {
    margin-left: 50px;
    .name {
      font-size: 40px;
      font-weight: bolder;
    }
    .access {
      color: #a1a1a1;
    }
  }
}
.login-info {
  color: #a1a1a1;
}

// 右边区域
.num {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: wrap;
  .el-card {
    margin-bottom: 10px;
    width: 350px;
  };
  .icon {
    width: 100px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    color: #fff;
  }
  .detail {
    padding-left: 10px;
    .nums {
      font-size: 20px;
      font-weight: bolder;
    }
    .text {
      color: #a1a1a1;
      font-size: 20px;
    }
  }
}
// 表图部分
.line-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.rb-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  .chart-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>